<template>
  <div class="container">
    <div style="display: flex">
      <div style="flex: 1">
        <More />
      </div>
      <div style="flex: 1">
        <UButton @click="click">切换gridSize网格布局</UButton>
        <MoreVirtual
          :key="gridSize"
          :grid-size="gridSize"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import More from './components/More/index.vue'
import MoreVirtual from './components/MoreVirtual/index.vue'

const gridSize = ref(0)

const click = () => {
  gridSize.value = gridSize.value === 0 ? 3 : 0
}
</script>

<style scoped>
.container {
  margin: 0 auto;
  padding: 20px;
  max-width: 800px;
}
</style>
